<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card style="height: 85vh;">
          <div slot="header" class="clearfix">
            <span>图表编辑-</span><a href="https://www.isqqw.com/" style="color: #E6A23C;" target="_blank">图表库</a>
            <el-button icon="el-icon-video-play" style="float: right; padding: 3px 0" type="text"
                       @click="loadData">运行
            </el-button>
            <el-button icon="el-icon-edit" style="float: right; padding: 3px 0;margin-right: 20px;" type="text"
                       @click="submitForm">保存
            </el-button>
          </div>
          <ace ref="ace" v-model="form.echartData" @input="aceInput"/>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="height: 85vh;">
          <div slot="header" class="clearfix">
            <span>图表展示</span>
            <el-button icon="el-icon-download" style="float: right; padding: 3px 0" type="text"
                       @click="toImage">下载
            </el-button>
          </div>
          <div ref="echart" style="height:83vh;width:100%;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getBEchartType, updateBEchartType} from "@/views/zutai/api/zutai/bEchartType";
import html2canvas from "html2canvas";
import ace from '../components/ace'
import request from '@/utils/request';
import chartOption from "../components/config-json/chart-option";

export default {
  name: "EchatDetail",
  components: {
    ace
  },
  data() {
    return {
      // 表单参数
      form: {
        echartData: ''
      },
      echart: null,
    }
  },
  mounted() {
    this.getDetail()
  },
  beforeDestroy() {
  },
  methods: {
    // 页面元素转图片
    toImage() {
      // 手动创建一个 canvas 标签
      const canvas = document.createElement("canvas")
      // 获取父标签，意思是这个标签内的 DOM 元素生成图片
      // imageTofile是给截图范围内的父级元素自定义的ref名称
      let canvasBox = this.$refs.echart
      // 获取父级的宽高
      const width = parseInt(window.getComputedStyle(canvasBox).width)
      const height = parseInt(window.getComputedStyle(canvasBox).height)
      // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
      canvas.width = width * 2
      canvas.height = height * 2
      canvas.style.width = width + 'px'
      canvas.style.height = height + 'px'
      const context = canvas.getContext("2d");
      context.scale(2, 2);
      const options = {
        backgroundColor: null,
        canvas: canvas,
        useCORS: true
      }
      html2canvas(canvasBox, options).then((canvas) => {
        // toDataURL 图片格式转成 base64
        let dataURL = canvas.toDataURL("image/png")
        // console.log(dataURL)
        this.downloadImage(dataURL)
      })
    },
    //下载图片
    downloadImage(url) {
      // 如果是在网页中可以直接创建一个 a 标签直接下载
      let a = document.createElement('a')
      a.href = url
      a.download = this.form.echartType
      a.click()
    },
    async loadData() {
      if (this.echart) {
        this.echart.dispose();
      }
      let funStr = this.getFun(this.form.echartData);
      let fun = new Function('request, echarts', funStr)
      let option = await fun(request, this.$echarts)

      let view = this.$refs.echart;
      this.echart = this.$echarts.init(view);
      this.echart.setOption(option);
    },
    //ace编辑器
    aceInput(data) {
      //console.log('ace编辑器',data);
      this.form.echartData = data;
    },
    getDetail() {
      getBEchartType(this.$route.query.id).then(response => {
        this.form = response.data;
        this.$refs.ace.setValue(this.form.echartData)
        this.$refs.ace.setMaxLines(35)
        this.loadData();
      });
    },

    /** 提交按钮 */
    submitForm() {
      updateBEchartType(this.form).then(response => {
        this.$modal.msgSuccess("修改成功");
      });
    },
    getFun(optionStr) {
      return chartOption.getFun(optionStr);
    },
  }
}
</script>
